<style>
  .header-font {
    font-size: 15px;
    font-weight: bold;
  }
  .line {
    margin: 10px 0;
    width: 100%;
    border: 0.5px solid rgb(218, 218, 218);
  }
</style>
<template>
  <div>
    <div class='header-font'>
      <Icon type="md-apps" />
      <span>账户充值</span>
    </div>
    <div class="line"></div>
    <div style="margin-left: 60px;">
      <div  v-if="rechargeState === false" style="margin-top: 40px; margin-left: 35px; margin-bottom: 30px;">
        <Tag color="green" style="font-size: 15px; text-align: center; width: 180px; height: 35px; line-height: 35px;">账户充值信息填写</Tag>
      </div>
      <div style="margin-left: 75px;">
        <Form
          ref="accountForm"
          :model="form"
          :rules="rules"
          :label-width="120">
          <div v-if="rechargeState === false">
             <FormItem prop="phone" style="width: 350px; margin-bottom: 35px" label="用户手机号码：">
              <Input type="text" v-model="form.phone" placeholder="请输入手机号码" />
            </FormItem>
            <FormItem prop="recharge" style="width: 350px; margin-bottom: 35px" label="充值金额(元)：">
              <Input type="text" v-model="form.recharge" placeholder="请输入充值金额" />
            </FormItem>
            <FormItem prop="type" style="width: 350px; margin-bottom: 35px" label="充值类型：">
              <Select v-model="form.type">
                <Option value="0">
                  佣金充值
                </Option>
                <Option value="1">
                  服务费充值
                </Option>
              </Select>
            </FormItem>
            <FormItem prop="method" style="width: 350px; margin-bottom: 35px" label="充值方式：">
              <Select v-model="form.method">
                <Option value="0">
                  银行卡
                </Option>
                <Option value="1">
                  微信
                </Option>
                <Option value="2">
                  支付宝
                </Option>
              </Select>
            </FormItem>
            <FormItem prop="des" style="width: 650px; margin-bottom: 65px" label="商户备注信息：">
              <Input type="textarea" :rows="6" v-model="form.des" placeholder="请输入备注信息" />
            </FormItem>
            <FormItem>
              <Button style="margin-left: 10px;" @click="handleClick" type="primary">
                下一步
              </Button>
            </FormItem>
          </div>
        </Form>
        <div v-if="rechargeState === true">
          <Button style="margin-left: -120px;" type="primary" @click="handleBack">
            返回充值信息填写
          </Button>
          <div v-if="form.method === '0'" style="width: 600px; margin: 0 auto; margin-top: 100px; font-size: 20px;">
            <Row>
              <Col span="5">银行卡号：</Col>
              <Col span="10">6214855192759385</Col>
            </Row>
            <Row style="margin-top: 20px;">
              <Col span="5">姓名：</Col>
              <Col span="10">周文勤</Col>
            </Row>
            <Row style="margin-top: 20px;">
              <Col span="5">收款银行：</Col>
              <Col span="10">招商银行</Col>
            </Row>
            <Row style="margin-top: 20px;">
              <Col span="5">开户网点：</Col>
              <Col span="10">江苏省常州市武进支行</Col>
            </Row>
          </div>
          <div v-if="form.method === '1'" style="width: 400px; margin: 0 auto">
            <img src="../../../assets/images/weixin.jpg" alt="" style="width: 280px; margin-top: 100px;">
          </div>
          <div v-if="form.method === '2'" style="width: 400px; margin: 0 auto">
            <img src="../../../assets/images/zhifubao.jpg" alt="" style="width: 280px; margin-top: 100px;">
          </div>
          <div style="width: 600px; margin: 0 auto; font-size: 17px; font-weight: bold; margin-top: 50px;">充值完毕后, 请联系商务吴经理确认到账, 联系方式: 18915079111</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  mapActions,
  mapState
} from 'vuex'
export default {
  data () {
    return {
      title: '财务管理账户充值',
      postData: {},
      rechargeState: false,
      form: {
        phone: '',
        recharge: '',
        des: '',
        type: '0',
        method: '0'
      },
      rules: {
        phone: [
          { required: true, message: '手机号不能为空', trigger: 'blur' }
        ],
        recharge: [
          { required: true, message: '充值金额不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    ...mapActions([
      'accountChargeRequest'
    ]),
    handleClick () {
      this.$refs.accountForm.validate((valid) => {
        if (valid) {
          this.postData = {
            tel: this.form.phone,
            price: this.form.recharge,
            type: this.form.type,
            paytype: this.form.method,
            des: this.form.des
          }
          this.accountChargeRequest(this.postData).then((resp) => {
            if (resp.data.state === '000') {
              this.$Message.success('充值申请成功')
              this.rechargeState = true
            } else {
              this.$Message.error(resp.data.msg)
            }
          })
          // console.log(this.postData)
        }
      })
    },
    handleChange (value) {
      this.postData.type = parseInt(value)
      // console.log(this.postData)
    },
    handleChangeMethod (value) {
      this.postData.method = parseInt(value)
      // console.log(this.postData)
    },
    handleBack () {
      this.rechargeState = false
    }
  }
}
</script>
